import React, { useEffect } from 'react';
import { connect } from 'umi';
import { Skeleton, Card } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { withRoutePage } from '@/utils/enhanceUtils';
import RulesTable from './Components/RulesTable';

const RulesList = ({ dispatch, loading, rulesList, location, route }) => {
    const { name } = route;
    const { ruleType } = rulesList;

    // 获取类型
    const getRuleType = () => {
        dispatch({
            type: 'rulesList/featchRuleType',
            payload: {
                code: 'institutionType'
            },
            callback: res => {
                const data = {};
                res.forEach(item => {
                    data[item.dictValue] = {
                        list: [],
                        pagination: {
                            pageSize: 10,
                            current: 1,
                            total: 0
                        }
                    };
                });
                dispatch({
                    type: 'rulesList/save',
                    payload: {
                        rulesTableList: data
                    }
                });
            }
        });
    };

    useEffect(() => {
        if (!ruleType.length) getRuleType();
    }, []);

    const renderedPanels = () =>
        ruleType.map(item => {
            if (item.dictValue === name) {
                return (
                    <Card bordered={false} key={item.dictValue}>
                        <RulesTable
                            code={route.code}
                            institutionType={item.dictValue}
                            ruleType={ruleType}
                            name={name}
                            query={location.query}
                            pathname={location.pathname}
                        />
                    </Card>
                );
            }
            return '';
        });

    return (
        <PageHeaderWrapper>
            {loading.effects['rulesList/featchRuleType'] ? <Skeleton active /> : renderedPanels()}
        </PageHeaderWrapper>
    );
};
export default withRoutePage(
    connect(({ loading, rulesList, user }) => ({
        user,
        loading,
        rulesList
    }))(RulesList)
);
